<template>
  <section class="form">
    <section class="form-title">{{ title }}</section>
    <section class="form-body">
      <el-form ref="form" :model="model" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名称" prop="companyName">
              <el-input type="text" v-model="model.companyName" :readonly="!operation"></el-input>
            </el-form-item>
            <el-form-item label="社会统一信用代码" prop="usci">
              <el-input type="text" v-model="model.usci" :readonly="!operation"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="companyAddress">
              <el-input type="text" v-model="model.companyAddress" :readonly="!operation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="leader">
              <el-input type="text" v-model="model.leader" :readonly="!operation"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input type="text" v-model="model.phone" :readonly="!operation"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input type="text" v-model="model.email" :readonly="!operation"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24"
            ><el-form-item label="备注" prop="remark"> <el-input type="textarea" v-model="model.remark" :readonly="!operation" rows="3" resize="none"></el-input> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
    </section>
    <section class="form-action" v-if="operation">
      <el-button type="default" icon="el-icon-close" round title="取消" @click="cancel"></el-button>
      <el-button type="primary" icon="el-icon-check" round title="确认" @click="confirm"></el-button>
    </section>
  </section>
</template>

<script>
import * as company from '../../../api/private/company'
export default {
  name: 'CompanyForm',
  props: {
    title: {
      type: String,
      required: true
    },
    model: {
      type: Object,
      required: true
    },
    operation: {
      type: Boolean,
      required: true
    },
    add: {
      type: Boolean,
      required: true
    }
  },
  data: () => ({
    rules: {
      companyName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
      usci: [
        {
          required: true,
          message: '社会统一信用代码不能为空',
          trigger: 'blur'
        }
      ]
    }
  }),
  methods: {
    clearValidate() {
      this.$refs.form.clearValidate()
    },
    confirm() {
      if (this.add) this.confirmAddCompany()
      else this.confirmEditCompany()
    },
    cancel() {
      this.$emit('cancel', null)
    },
    confirmAddCompany() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const data = await company.addCompany(this.model)
          if (data.code === 0) {
            this.$msg.success(`公司信息录入成功`)
            this.cancel()
          } else {
            this.$msg.error(`公司信息录入失败，${data.msg}`)
          }
        }
      })
    },
    confirmEditCompany() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const data = await company.editCompany(this.model)
          if (data.code === 0) {
            this.$msg.success(`公司信息修改成功`)
            this.cancel()
          } else {
            this.$msg.error(`公司信息修改失败，${data.msg}`)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  width: 35rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 3rem auto;
  box-sizing: border-box;

  .form-title {
    width: 100%;
    font-size: 1.5rem;
    margin: 2rem 0;
  }

  .form-body {
  }

  .form-action {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
  }
}
</style>
